.echat-Detail {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #f5f5f5;
  overflow-y: auto;

  .echat-Detail-header {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
  }

  .DetailImage-bg {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    padding: 50px 15px 0;
    box-sizing: border-box;

    p {
      color: #fff;
      font-size: 12px;
      text-align: left;
      margin-bottom: 5px;
    }

    p.title {
      font-size: 18px;
    }
  }

  .Qr-dialog {
    width: 100%;
    height: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    transition: height 0.5s cubic-bezier(0, .97, 0, .98);

    .QrClose {
      position: absolute;
      right: 30px;
      top: 30px;
    }
  }

  .Qr-dialog.active {
    height: 100%;
  }

  .echat-Detail-container {
    width: 100%;
    position: relative;

    .detail-item {
      display: flex;
      height: 38px;
      justify-content: space-between;
      align-items: center;
      font-weight: 400;
      padding: 8px 10px 8px 15px;
      box-sizing: border-box;
      background-color: #fff;
      font-size: 14px;

      i {
        margin: 0;
      }

      .many {
        color: #6D6D6D;
        font-size: 12px;
        display: flex;
        align-items: center;

        span {
          margin-right: 2px;
        }
      }
    }

    .detail-item:hover {
      opacity: 0.8;
    }

    .firend-info {
      padding: 20px 10px 8px 15px;
      box-sizing: border-box;
      background-color: #fff;
      font-size: 13px;
      text-align: left;
      margin-bottom: 5px;
    }

    .group-users {
      width: 100%;
      background-color: #fff;
      color: #323232;
      box-sizing: border-box;
      margin-bottom: 5px;

      .group-users-title {
        border-bottom: 1px solid #f5f5f5;
        margin-bottom: 10px;

        > span {
          font-size: 14px;
        }
      }

      .group-users-liitte-list {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        li {
          width: 64px;
          display: flex;
          flex-flow: column;
          justify-content: center;
          align-items: center;
          margin-bottom: 10px;

          span {
            max-width: 64px;
            font-size: 12px;
            color: #6D6D6D;
          }
        }
      }
    }

    .group-card {
      margin-bottom: 5px;
    }

    .group-tag {
      margin-bottom: 5px;

      > span {
        font-size: 14px;
        color: #323232;
      }

      > p {
        display: flex;
        justify-content: flex-start;
      }
    }

    .group-managers {
      justify-content: space-between;

      > div {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        a {
          width: 28px;
          height: 28px;
          margin-right: 5px;
        }

        span {
          font-size: 14px;
          color: #323232;
          margin-right: 15px;
        }
      }
    }

    .detail-button {
      padding: 0 15px;
      box-sizing: border-box;
    }

    //
    .detail-avatar {
      display: block;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -60px;
      width: 80px;
      height: 80px;
      overflow: hidden;
      border-radius: 50%;
      border: 2px solid #f5f5f5;
      z-index: 5;

      img {
        width: 80px;
      }
    }
  }
}

.echat-apply {
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
  text-align: left;

  .introduceForm {
    .el-form-item {
      margin-bottom: 0;
    }

    .el-form-item__label {
      font-size: 12px;
      color: #d5d5d5;
    }
  }

  span {
    font-size: 13px;
    color: #b7b7b7;
    padding-left: 15px;
    cursor: pointer;
  }

  i {
    display: block;
    padding-right: 10px;
    box-sizing: border-box;
    font-style: normal;
    color: #6c6c6c;
    text-align: right;
  }
}
